<template>
	<div class="information">

		<section class="head">
			<span style="border-left: 1px solid #555;cursor: pointer;" @click="Edit()">退出登录</span>
			<img :src="imgurl" @click="show = !show" class="img" />
			<span>欢迎您，{{userDetail.username}}</span>

		</section>

		<div class="aside">
			<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
				<el-menu :default-openeds="['1', '3']">
					<el-submenu index="2">
						<template slot="title"><i class="el-icon-menu"></i>其他</template>
						<el-menu-item index="2-1" @click="toDepart()">部门列表</el-menu-item>
						<el-menu-item index="4-1" @click="toRank()">绩效排名</el-menu-item>
						<el-menu-item index="3-1" @click="toMessage()">招聘信息</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-aside>
		</div>

		<el-card class="box-card">
			<el-button @click="dialogFormVisible2=true">申请资源</el-button>
			<div class="message">
				<img :src="imgurl" />

				<div>
					<div class="key">姓名：</div>
					<div class="content">{{userDetail.username}}</div>
				</div>
				<div>
					<div class="key">工号：</div>
					<div class="content">{{userDetail.userid}}</div>
				</div>
				<div>
					<div class="key">密码：</div>
					<div class="content">{{userDetail.password}}</div>
				</div>
				<div>
					<div class="key">性别：</div>
					<div class="content">{{userDetail.sex}}</div>
				</div>
				<div>
					<div class="key">部门：</div>
					<div class="content">{{userDetail.department}}</div>
				</div>
				<div>
					<div class="key">职位：</div>
					<div class="content">{{userDetail.post}}</div>
				</div>
				<div>
					<div class="key">薪资：</div>
					<div class="content">{{userDetail.salary}}元</div>
				</div>
				<div>
					<div class="key">电话：</div>
					<div class="content">{{userDetail.telephone}}</div>
				</div>
				<div>
					<div class="key">生日：</div>
					<div class="content">{{userDetail.birthday}}</div>
				</div>
				<div>
					<div class="key">入职时间</div>
					<div class="content">{{userDetail.startDate}}</div>
				</div>
				<div>
					<div class="key">职位类型</div>
					<div class="content">{{userDetail.type}}</div>
				</div>
				<div>
					<div class="key">身份证号</div>
					<div class="content">{{userDetail.number}}</div>
				</div>
			</div>
		</el-card>

		<div class="salary">
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<span>个人最近绩效</span>
				</div>
				<div style="display: block;">您最近:</div>
				<div>迟到：{{userSalary.late}}次</div>
				<div>早退：{{userSalary.early}}次</div>
				<div>加班：{{userSalary.overtime}}次</div>
			</el-card>
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<span>个人薪资详情</span>
				</div>
				<div>基本工资：{{userSalary.base}}元</div>
				<div>迟到奖金：{{userSalary.late}}元</div>
				<div>早退罚金：{{userSalary.early}}元</div>
				<div>加班奖金：{{userSalary.overtime}}元</div>
				<div>额外奖金：{{userSalary.awardaddition}}元</div>
				<div>奖励理由：{{userSalary.awardreason}}</div>
				<div>额外罚金：{{userSalary.fine}}元</div>
				<div>惩罚理由：{{userSalary.finereason}}</div>
				<div>最终薪资：{{userSalary.total}}元</div>
			</el-card>
		</div>
		<div class="ask">
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<span>请求详情</span>
				</div>
				<el-table :data="ask_list" border style="font-size: 13px;margin: 10px auto;">
					<el-table-column label="请求详情表" align="center">
						<el-table-column prop="askname" label="请求名称" align="center">
						</el-table-column>
						<el-table-column prop="askreason" label="请求原因" align="center">
						</el-table-column>
						<el-table-column prop="askstatus" label="操作状态" align="center">
						</el-table-column>
						<el-table-column prop="startdate" label="开始日期" align="center">
						</el-table-column>
						<el-table-column prop="enddate" label="结束日期" align="center">
						</el-table-column>
						<el-table-column prop="operateman" label="操作人" align="center">
						</el-table-column>
						<el-table-column prop="resultreason" label="理由" align="center">
						</el-table-column>
					</el-table-column>
				</el-table>
				<div class="pagination">
					<el-pagination background @current-change="handleCurrentChange2" :page-size="seachObj2.pageSize" :current-page.sync="seachObj2.page" layout="prev, pager, next, jumper,total" :total="totalNum2">
					</el-pagination>
				</div>
			</el-card>
		</div>

		<el-dialog title="部门" :visible.sync="dialogFormVisible" top="100px" width="1000px">
			<el-table :data="depart_list" border style="width: 60%;font-size: 13px;margin: 10px auto;">
				<el-table-column label="部门信息表" align="center">
					<el-table-column prop="departnumber" label="部门编号" align="center">
					</el-table-column>
					<el-table-column prop="departname" label="部门名称" align="center">
					</el-table-column>
					<el-table-column prop="startDate" label="创建日期" align="center">
					</el-table-column>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background @current-change="handleCurrentChange" :page-size="seachObj.pageSize" :current-page.sync="seachObj.page" layout="prev, pager, next, jumper,total" :total="totalNum">
				</el-pagination>
			</div>
		</el-dialog>

		<el-dialog title="招聘信息表" :visible.sync="dialogFormVisible1" top="100px" width="1000px">
			<el-table :data="message_list" border style="width: 70%;font-size: 13px;margin: 20px auto;">
				<el-table-column label="招聘信息表" align="center">
					<el-table-column prop="position" label="职位名称" align="center">
					</el-table-column>
					<el-table-column prop="context" label="职位说明" align="center">
					</el-table-column>
					<el-table-column prop="total" label="招聘人数" align="center">
					</el-table-column>
					<el-table-column prop="salary" label="薪资" align="center">
					</el-table-column>
					<el-table-column prop="startDate" label="开始日期" align="center">
					</el-table-column>
					<el-table-column prop="startDate" label="截止日期" align="center">
					</el-table-column>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background @current-change="handleCurrentChange1" :page-size="seachObj1.pageSize" :current-page.sync="seachObj1.page" layout="prev, pager, next, jumper,total" :total="totalNum1">
				</el-pagination>
			</div>
		</el-dialog>

		<el-dialog title="新增请求" :visible.sync="dialogFormVisible2" top="100px" width="1000px">
			<el-form ref="askForm1">
				<el-form-item label="*请求名称：">
						<el-select v-model="askForm.askname" placeholder="请选择"  :change="showResourceStatus()">
							<el-option v-for="item in asktype" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
				</el-form-item>
				<el-form-item label="*请求理由：">
					<el-input v-model="askForm.askreason">
					</el-input>
				</el-form-item>
				<el-form-item label="*资源名称：" v-show="resourceStatus">
					<el-input v-model="askForm.resource">
					</el-input>
				</el-form-item>
				<el-form-item label="*开始日期：">
					<el-date-picker type="date" placeholder="选择日期" v-model="askForm.startdate">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="*结束日期：">
					<el-date-picker type="date" placeholder="选择日期" v-model="askForm.enddate">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitAsk()">确 定</el-button>
					<el-button @click="dialogFormVisible2 = false">取 消</el-button>

				</el-form-item>
			</el-form>
		</el-dialog>
		
		<el-dialog title="新增请求" :visible.sync="dialogFormVisible3" top="100px" width="1000px">
			<el-card class="box-card" v-for="(item, index) in performance_list" v-if="index<3">
				<div slot="header" class="clearfix">
					<span>第{{index+1}}名</span>
				</div>
				<div>绩效评分：{{item.rank}}分</div>
				<div>用户姓名：{{item.username}}</div>
				<div>用户工号：{{item.userid}}元</div>
			</el-card>
		</el-dialog>

	</div>
</template>

<script>
	import asideItem from "../../common/asideblock"
	export default {
		name: 'personalinformation',
		components: {
			asideItem
		},
		data() {
			return {
				show: false,
				userid: '',
				userDetail: {},
				imgurl: '',
				depart_list: [],
				dialogFormVisible: false,
				dialogFormVisible1: false,
				dialogFormVisible2: false,
				dialogFormVisible3: false,
				performance_list:[],
				resourceStatus:false,
				userSalary: {},
				userPerformance: {},
				seachObj: {
					department: {
						departid: '',
						departname: '',
						startDate: ''
					},
					page: 1,
					pageSize: 5
				},
				asktype:[{
					label:'请假',
					value:'请假'
				},{
					label:'出差',
					value:'出差'
				},{
					label:'申请资源',
					value:'申请资源'
				}],
				message_list: [],
				seachObj1: {
					message: {
						position: '',
						startDate: '',
					},
					page: 1,
					pageSize: 5
				},
				askForm: {
					askname: '',
					askreason: '',
					username: '',
					userid: '',
					startdate: '',
					enddate: '',
					askstatus: '0',
					resource:''
				},
				seachObj2: {
					ask: {
						userid: '',
					},
					page: 1,
					pageSize: 5
				},
				userMessage:{
					username:'',
					userid:''
				},
				ask_list: [],
				totalNum: '',
				totalNum1: '',
				totalNum2: ''
			}
		},
		mounted() {
			this.loadInit();
			

		},
		methods: {
			loadInit() {
				this.userid = this.$route.query.userid;
				this.seachObj2.ask.userid = this.$route.query.userid;
				this.getDepartData();
				this.getPersonalMessage();
				this.getMessageData();
				this.getPersonalSalary();
				this.getPersonalPerformance();
				this.getAskList();
				this.getLoginUser();
				this.getRank();
			},
			getLoginUser(){
				this.userMessage.username=decodeURI(this.$route.query.username);
				this.userMessage.userid=this.$route.query.userid;
			},
			getDepartData() {
				var vm = this;
				vm.$http.post(this.API.FINDALLDEPART, JSON.stringify(vm.seachObj), this.API.HEADER).then((res) => {
					vm.depart_list = res.data.data.data;
					for(let i = 0; i < vm.depart_list.length; i++) {
						if(vm.depart_list[i].startDate == "" || vm.depart_list[i].startDate == null) {
							vm.depart_list[i].startDate = "暂无";
						}
					}
					vm.totalNum = res.data.total;
					vm.loading = false;
				})
			},
			
			showResourceStatus(){
				var vm=this;
				if(vm.askForm.askname=="申请资源"){
					vm.resourceStatus=true;
				}else{
					vm.resourceStatus=false;
				}
			},
			
			getAskList() {
				var vm = this;
				vm.$http.post(this.API.FINDALLASK, JSON.stringify(vm.seachObj2), this.API.HEADER).then((res) => {
					vm.ask_list = res.data.data.data;
					for(var i = 0; i < vm.ask_list.length; i++) {
						if(vm.ask_list[i].askstatus == "0") {
							vm.ask_list[i].askstatus = "待沟通";
						} else if(vm.ask_list[i].askstatus == "1") {
							vm.ask_list[i].askstatus = "批准";
						} else if(vm.ask_list[i].askstatus == "2"){
							vm.ask_list[i].askstatus = "拒绝";
						}else if(vm.ask_list[i].askstatus == "3"){
							vm.ask_list[i].askstatus = "面谈";
						}
						vm.ask_list[i].startdate = vm.dateFormat(vm.ask_list[i].startdate);
						vm.ask_list[i].enddate = vm.dateFormat(vm.ask_list[i].enddate);
					}
					vm.totalNum2 = res.data.total;
					vm.loading = false;
				})
			},

			getMessageData() {
				var vm = this;
				vm.$http.post(this.API.FINDALLMESSAGE, JSON.stringify(vm.seachObj1), this.API.HEADER).then((res) => {
					vm.message_list = res.data.data.data;
					for(let i = 0; i < vm.message_list.length; i++) {
						if(vm.message_list[i].startDate == "" || vm.message_list[i].startDate == null) {
							vm.message_list[i].startDate = "暂无";
						}
					}

					vm.totalNum1 = res.data.total;
					vm.loading = false;
				})
			},
			
			getRank() {
				var vm = this;
				vm.$http.post(this.API.FINDALLPERFORMANCE, JSON.stringify(vm.seachObj), this.API.HEADER).then((res) => {
					vm.performance_list = res.data.data.data;
					for(let i = 0; i < vm.performance_list.length; i++) {
						vm.performance_list[i].rank = vm.performance_list[i].smalllate * -0.3 + vm.performance_list[i].middlelate * -0.5+ vm.performance_list[i].largelate * -1 + vm.performance_list[i].early * -1 + vm.performance_list[i].smallovertime * 0.3 + vm.performance_list[i].middleovertime * 0.5 + vm.performance_list[i].largeovertime * 1 
					}
					for(let j=0;j<vm.performance_list.length;j++){
						for(let z=0;z<vm.performance_list.length-1-j;z++){
							if(vm.performance_list[z].rank<vm.performance_list[z+1].rank){
								var temp;
								temp=vm.performance_list[z].rank;  
			                    vm.performance_list[z].rank=vm.performance_list[z+1].rank;  
			                    vm.performance_list[z+1].rank=temp;  
							}
						}
					}
				})
			},
			
			submitAsk() {
				var vm = this;
				vm.$http.post(this.API.INSERTASK, JSON.stringify(vm.askForm), this.API.HEADER).then((res) => {
					if(res.data.message == "success") {
						vm.$message({
							showClose: true,
							message: '成功发送请求'
						});
						vm.getAskList();
						vm.dialogFormVisible2 = false;
						this.$refs.askForm1.resetFields();
					}
				})
			},

			getPersonalMessage() {
				var vm = this;
				vm.$http.post(this.API.FINDONEUSER, JSON.stringify({
					userid: vm.userid
				}), this.API.HEADER).then((res) => {
					vm.userDetail = res.data.data.data;
					if(vm.userDetail.type == "0") {
						vm.userDetail.type = "实习生"
					} else {
						vm.userDetail.type = "正式员工"
					}
					vm.askForm.userid = vm.userDetail.userid;
					vm.askForm.username = vm.userDetail.username;
					vm.seachObj2.ask.userid = vm.userDetail.userid;
					vm.imgurl = "http://localhost:8080/img/" + vm.userDetail.userimg + ".png";
				})
			},

			getPersonalSalary() {
				var vm = this;
				vm.$http.post(this.API.SALARYDETAIL, JSON.stringify({
					userid: vm.userid
				}), this.API.HEADER).then((res) => {
					vm.userSalary = res.data.data.data;
					vm.userSalary.total = vm.userSalary.base - vm.userSalary.late - vm.userSalary.early - vm.userSalary.fine + vm.userSalary.overtime + vm.userSalary.awardaddition;
				})
			},
			getPersonalPerformance() {
				var vm = this;
				vm.$http.post(this.API.PERFORMANCEDETAIL, JSON.stringify({
					userid: vm.userid
				}), this.API.HEADER).then((res) => {
					vm.userPerformance = res.data.data.data;
				})
			},
			toDepart() {
				this.dialogFormVisible = true;

			},
			toMessage() {
				this.dialogFormVisible1 = true;
			},
			toRank() {
				this.dialogFormVisible3 = true;
			},
			handleCurrentChange(val) {
				var vm = this;
				vm.seachObj.page = val;
				vm.getDepartData();
			},
			handleCurrentChange1(val) {
				var vm = this;
				vm.seachObj1.page = val;
				vm.getMessageData();
			},
			handleCurrentChange2(val) {
				var vm = this;
				vm.seachObj2.page = val;
				vm.getAskList();
			},
			dateFormat(date) {
				var date = new Date(date)
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				if(month < 10) {
					month = "0" + month;
				}
				if(day < 10) {
					day = "0" + day;
				}
				return year + '-' + month + '-' + day;
			}
		}
	}
</script>

<style lang="scss" scoped>
	section.head {
		height: 68px;
		border-bottom: 1px solid #D3DCE6;
		background: #D3DCE6;
		img.img {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			cursor: pointer;
			float: right;
			margin-right: 5%;
			margin-top: 9px;
		}
		span {
			width: 10%;
			height: 50px;
			line-height: 50px;
			text-align: center;
			float: right;
			margin-right: 1%;
			margin-top: 9px;
		}
		span:first-child:hover {
			transition: all .4s;
			color: red;
		}
	}
	.el-table{
		border-radius: 10px;
		padding-bottom: 10px;
	}
	.el-card {
		width: 60%;
		margin-top: 40px;
		.el-button {
			float: right;
		}
		div.message {
			width: 70%;
			margin: 20px auto;
			margin-top: 60px;
			img {
				display: block;
				width: 150px;
				height: 150px;
				border-radius: 50%;
				margin: 20px auto;
			}
			div {
				width: 45%;
				height: 40px;
				display: inline-block;
				border: 1px solid #D9D9D9;
				margin-bottom: 2px;
				div {
					display: inline-block;
					height: 40px;
					line-height: 40px;
					text-align: center;
					width: 45%;
					border: 0;
				}
				div.key {
					background: #ebeef5;
				}
			}
		}
	}
	
	div.salary {
		width: 60%;
		height: 400px;
		margin: 20px auto;
		.el-card {
			width: 40%;
			height: 300px;
			margin-left: 8%;
			display: inline-block;
			div {
				width: 40%;
				height: 40px;
				line-height: 40px;
				display: inline-block;
				margin-left: 2%;
			}
			div:first-child {
				width: 40%;
			}
		}
		.el-card:first-child {
			width: 40%;
			height: 300px;
			margin-left: 8%;
			display: inline-block;
			div {
				width: 50%;
				height: 40px;
				line-height: 40px;
				display: inline-block;
				margin-left: 2%;
			}
			div:first-child {
				width: 30%;
			}
		}
	}
	
	.el-dialog {
		.el-form {
			width: 80%;
			margin: 0 auto;
			.el-form-item {
				width: 100%;
				display: block;
				.el-input {
					width: 70%;
				}
				.el-select {
					width: 70%;
				}
			}
		}
	}
	
	.aside {
		width: 20%;
		margin-top: 60px;
		margin-left: 5%;
		float: left;
	}
	
	div.ask {
		width: 50%;
		margin: 20px auto;
		.el-card {
			width: 100%;
			.pagination {
				width: 100%;
				height: 24px;
				margin: 25px 0;
				font-size: 12px;
				text-align: right;
			}
		}
	}
	
	.el-dialog{
		.el-card {
			width: 40%;
			display: inline-block;
			margin-left: 10px;
			
			div{
				height: 50px;
				line-height: 50px;
				width: 40%;
				display: inline-block;
			}
		}
		.el-card:first-child{
			width: 50%;
			display: block;
			margin: 10px  auto;
		}
	}
	.pagination {
		width: 100%;
		height: 24px;
		margin: 25px 0;
		font-size: 12px;
		text-align: right;
	}
</style>